<template>
  <div id="main-search">
    <div class="search">
    <search>
      <p slot="search-title">一站式AI算法及产品化平台</p>
       <Input slot="search-content" :placeholder="placeholder" v-model="value"></Input>
       <img src="~assets/images/搜索@1x.png" alt="" @click="search">
      </search>
      </div>
  </div>
</template>
<script>
import Search from '../../common/search/Search.vue'
import {getAlgoDataByTitle} from 'api/algorithm.js'
import {getDemandDataByTitle} from 'api/demand.js'
export default {
  name:'MainSearch',
  data(){
    return {
      placeholder:'',
      value:'',
      model:[],
      demand:[],
      searchtype:''
    }
  },
  components:{
    Search
  },
  methods:{
    search(){
      let title={};
      title.title=String(this.value);
      if(this.searchtype=='algo'){
      getAlgoDataByTitle('/api/model/listModelByTitle',title)
      .then(res=>{
        this.model=res.data;
        this.$emit('model',this.model);
        this.$Notice.success({
        title:'搜索成功',
        duration:5});
        this.value='';
      })
      .catch(err=>{
        this.$Notice.error({
        title:'搜索失败',
        duration:5});
        this.value='';
      });
      }else if(this.searchtype=='demand'){
      getDemandDataByTitle('/api/request/listRequestBytitle',title)
      .then(res=>{
        this.demand=res.data;
        this.$emit('demand',this.demand);
        this.$Notice.success({
        title:'搜索成功',
        duration:5});
        this.value='';
      })
      .catch(err=>{
        this.$Notice.error({
        title:'搜索失败',
        duration:5});
        this.value='';
      });
      }
    }
  }
}
</script>
<style>
#main-search{
  width: 100%;
  height: 15.625rem;
  background: url('~assets/images/backimg2.png');
  background-color: #000;
  
}
#main-search .search{
  width: 100vh;
  margin: 0 auto;
}
#main-search p{
  font-size: 30px;
  text-align: center;
  color: #fff;
}
#main-search input{
  height: 2.5rem;
  font-size: 14px;
}
#main-search input:hover{
  border-color: rgb(140, 48, 245);
}
#main-search img{
  position: relative;
  bottom: 1.5rem;
  left: 39rem;
  width: 1rem;
  height: 1rem;
}
</style>